const banner = document.querySelector('.banner')
const lunbo = banner.querySelector('.lunbo')
const bottom = banner.querySelector('.bottom')
const banner_width = banner.clientWidth
const banner_list = banner.querySelector('.menu')
const lists = banner.querySelector('.list>ul')


// 登录注册
const on = document.querySelector('.on')
const off = document.querySelector('.off')
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
if (!id) {
    on.classList.remove('active')
    off.classList.add('active')
}
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 401) {
        on.classList.remove('active')
        off.classList.add('active')
    }
    if (res.code === 1) {
        on.firstElementChild.innerText = res.info.nickname
        off.classList.remove('active')
        on.classList.add('active')
    }
}
xhr.setRequestHeader('authorization', token)
xhr.send()

// 轮播图
let index = 1
let timer = 0
let flag = true
function copy() {
    const first = lunbo.firstElementChild.cloneNode(true)
    const last = lunbo.lastElementChild.cloneNode(true)
    lunbo.appendChild(first)
    lunbo.insertBefore(last, lunbo.firstElementChild)
    lunbo.style.width = lunbo.children.length * 100 + '%'
    lunbo.style.left = -banner_width + 'px'

}
copy()
function set() {
    const poinNum = lunbo.children.length - 2
    for (let i = 0; i < poinNum; i++) {
        const span = document.createElement('span')
        if (i === 0) span.className = 'active'
        span.classList.add('cir')
        span.dataset.point = i
        bottom.appendChild(span)
    }
}
set()
function auto() {
    timer = setInterval(() => {
        index++
        move(lunbo, { left: -index * banner_width }, moveEnd())
    }, 2000)
}
auto()
function moveEnd() {
    if (index === lunbo.children.length - 1) {
        index = 1
        lunbo.style.left = -index * banner_width + 'px'
    }
    if (index === 0) {
        index = lunbo.children.length - 2
        lunbo.style.left = -index * banner_width + 'px'
    }

    for (let i = 0; i < bottom.children.length; i++) {
        bottom.children[i].classList.remove('active')
    }
    bottom.children[index - 1].classList.add('active')
    flag = true
}
function overOut() {
    banner.addEventListener('mouseover', () => { clearInterval(timer) })
    banner.addEventListener('mouseout', () => { auto() })
}
overOut()
function bindEvent() {
    banner.addEventListener('click', e => {
        if (e.target.className === 'left') {
            if (flag === false) return
            flag = false
            index--
            move(lunbo, { left: -index * banner_width }, moveEnd)
        }
        if (e.target.className === 'right') {
            if (flag === false) return
            flag = false
            index++
            move(lunbo, { left: -index * banner_width }, moveEnd)
        }
        if (e.target.className === 'cir') {
            if (flag === false) return
            flag = false
            index = e.target.dataset.point - 0 + 1
            move(lunbo, { left: -index * banner_width }, moveEnd)
        }
    })
}
bindEvent()
function changerTab() {
    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') clearInterval(timer)
        if (document.visibilityState === 'visible') auto()
    })
}
changerTab()

// 楼层导航  回到顶部
$('.floor>ul>li').click(function () {
    const index = $(this).index()
    const lou = $('.nav>.contain').eq(index)
    $('html,body').animate({ scrollTop: lou.offset().top })
})
$(window).scroll(function () {
    const scroll = document.documentElement.scrollTop || document.body.scrollTop
    $('.nav>.contain').each(function (index, item) {
        if (scroll >= $(item).offset().top) {
            $('.floor>ul>li').eq(index).addClass('active').siblings().removeClass('active')
        }
    })
    if (scroll >= 450) {
        $('.info>span:nth-of-type(5)').slideDown(200)
        $('.floor').show(100, 'linear')
    } else {
        $('.info>span:nth-of-type(5)').slideUp(200)
        $('.floor').hide(100, 'linear')
    }
})
$('.go_top').click(function () {
    $('html,body').animate({ scrollTop: 0 }, 200)
})

// 移入移出二级菜单左边
$('.menu').mouseover(() => {
    $('.banner>.list').show()
})
$('.menu').mouseout(() => {
    $('.banner>.list').hide()
})

// 渲染二级菜单左边
getMenu()
async function getMenu() {
    const res = await pAjax({ url: '/two', dataType: 'json' })
    bindMenu(res.data.category)
}
function bindMenu(list) {
    let str = ''
    list.forEach(item => {

        str += `
        <li data-id="${item.id}">
        <p>${item.name}</p>
    </li>
        `
    })
    banner_list.innerHTML += str
}

// 渲染右边二级菜单
banner_list.addEventListener('mouseover', e => {
    const id = e.target.dataset.id

    getList()
    async function getList() {
        let info = {
            type: `pc_index_category&id=${id}`,
        }
        const res = await pAjax({ url: '/one', data: info, dataType: 'json' })
        bindHtml(res.data.secondary)
    }

    function bindHtml(list) {
        let str = ''
        list.forEach(item => {
            str +=
                `
        <li>
            <img src="${item.pic}" alt="">
            <p>${item.name}</p>
        </li>
            `
        })
        lists.innerHTML = str
    }

})

//  渲染页面
const page = document.querySelectorAll('.safe>.contain>.main>div')
getPage()
async function getPage() {
    const res = await pAjax({ url: '/three', dataType: 'json' })
    bindPage(res.data.floors.slice(4, 5)[0].data.list)
}
function bindPage(list) {
    list.forEach((item, index) => {
        const str = `
        <p>${item.label}</p>
        <img src="${item.pic}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>${item.desc}</span>
        <p>￥${item.currentPrice}</p>
        <i>${item.originPrice}</i>
        `
        page[index].innerHTML = str
    })
}

const page1 = document.querySelectorAll('.routing>.contain>.main>div')
getPage1()
async function getPage1() {
    const res = await pAjax({ url: '/three', dataType: 'json' })
    // console.log(res.data.floors.slice(6, 7)[0].data.list)
    bindPage1(res.data.floors.slice(6, 7)[0].data.list)
}
function bindPage1(list) {
    // console.log(list)
    list.forEach((item, index) => {
        // console.log(item.title)
        const str = `
        
        <p>${item.label}</p>
        <img src="${item.pic}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>${item.desc}</span>
        <p>￥${item.currentPrice}</p>
        <i>${item.originPrice}</i>
    
        `
        page1[index].innerHTML = str
    })
}

const page2 = document.querySelectorAll('.cart>.contain>.main>div')
getPage2()
async function getPage2() {
    const res = await pAjax({ url: '/three', dataType: 'json' })
    // console.log(res.data.floors.slice(6, 7)[0].data.list)
    bindPage2(res.data.floors.slice(8, 9)[0].data.list)
}
function bindPage2(list) {
    // console.log(list)
    list.forEach((item, index) => {
        // console.log(item.title)
        const str = `
        
        <p>${item.label}</p>
        <img src="${item.pic}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>${item.desc}</span>
        <p>￥${item.currentPrice}</p>
        <i>${item.originPrice}</i>
        `
        page2[index].innerHTML = str
    })
}

const page3 = document.querySelectorAll('.robot>.contain>.main>div')
getPage3()
async function getPage3() {
    const res = await pAjax({ url: '/three', dataType: 'json' })
    bindPage3(res.data.floors.slice(10, 11)[0].data.list)
}
function bindPage3(list) {
    list.forEach((item, index) => {
        const str = `
        <p>${item.label}</p>
        <img src="${item.pic}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>${item.desc}</span>
        <p>￥${item.currentPrice}</p>
        <i>${item.originPrice}</i>
        `
        page3[index].innerHTML = str
    })
}

const page4 = document.querySelectorAll('.watch>.contain>.main>div')
getPage4()
async function getPage4() {
    const res = await pAjax({ url: '/three', dataType: 'json' })
    bindPage4(res.data.floors.slice(12, 13)[0].data.list)
}
function bindPage4(list) {

    list.forEach((item, index) => {
        const str = `
        <p>${item.label}</p>
        <img src="${item.pic}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>${item.desc}</span>
        <p>￥${item.currentPrice}</p>
        <i>${item.originPrice}</i>
        `
        page4[index].innerHTML = str
    })
}

const page5 = document.querySelectorAll('.wecological>.contain>.main>div')
getPage5()
async function getPage5() {
    const res = await pAjax({ url: '/three', dataType: 'json' })
    bindPage5(res.data.floors.slice(14, 15)[0].data.list)
}
function bindPage5(list) {
    list.forEach((item, index) => {
        const str = `
        <p>${item.label}</p>
        <img src="${item.pic}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>${item.desc}</span>
        <p>￥${item.currentPrice}</p>
        <i>${item.originPrice}</i>
        `
        page5[index].innerHTML = str
    })
}



const page6 = document.querySelector('.more>.contain>.list>ul')
getPage6()
async function getPage6() {
    const res = await pAjax({ url: '/foure', dataType: 'json' })
    bindPage6(res.data.list)
}
function bindPage6(list) {
    list.forEach((item) => {
        if (item.tagString) {
            const str = `
            <li>
                <img src="${item.img}"  data-id="${item.itemId}">
                <p>${item.title}</p>
                <p>￥${item.marketPrice}</p>
                <span>${item.tagString}</span>
            </li>
            `
            page6.innerHTML += str
        } else {
            const str = `
            <li >
                <img src="${item.img}"  data-id="${item.itemId}">
                <p>${item.title}</p>
                <p>${item.marketPrice}</p>
            </li>
            `
            page6.innerHTML += str
        }
    })
}

getPage7()
async function getPage7() {
    let info = {
        page: 1,
        _: 1639385313698,
    }
    const res = await pAjax({ url: '/foure', data: info, dataType: 'json' })
    bindPage7(res.data.list)
}
function bindPage7(list) {
    list.forEach((item) => {
        if (item.tagString) {
            const str = `
        <li>
            <img src="${item.img}" data-id="${item.itemId}">
            <p>${item.title}</p>
            <p>￥${item.marketPrice}</p>
            <span>${item.tagString}</span>
        </li>
        `
            page6.innerHTML += str
        } else {
            const str = `
        <li>
            <img src="${item.img}" data-id="${item.itemId}">
            <p>${item.title}</p>
            <p>￥${item.marketPrice}</p>
        </li>
        `
            page6.innerHTML += str
        }
    })
}

// 搜索引擎
const inp = document.querySelector('.logo>.contain>.right>input')
const ul = document.querySelector('.logo>.contain>.right>.u1')
inp.oninput = function () {
    const text = inp.value.trim()
    const script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34443,35104,35237,35049,34584,34518,35234,34579,34606,34815,26350,35145,22159&wd=${text}&req=2&csor=1&cb=handler&_=1637892915435`
    document.body.appendChild(script)
    script.remove()
}
function handler(res) {
    if (!res.g) {
        ul.style.display = 'none'
        return
    }
    let str = ''
    res.g.forEach(item => {
        str += `
         <li>${item.q}</li>
        `
    })
    ul.style.display = 'block'
    ul.innerHTML = str
}

const pages = document.querySelector('.safe>.contain>.main')
pages.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})

const page1s = document.querySelector('.routing>.contain>.main')
page1s.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})

const page2s = document.querySelector('.cart>.contain>.main')
page2s.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})

const page3s = document.querySelector('.robot>.contain>.main')
page3s.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        // console.log(e.target.dataset.id)
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})

const page4s = document.querySelector('.watch>.contain>.main')
page4s.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        // console.log(e.target.dataset.id)
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})

const page5s = document.querySelector('.wecological>.contain>.main')
page5s.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})

const pages6 = document.querySelector('.more>.contain>.list>ul')
pages6.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})
const pages7 = document.querySelector('.more>.contain>.list>ul')
pages7.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }
})